<style>
    :root {
      --penguin-size: 300px;
      --penguin-skin: gray;
      --penguin-belly: white;
      --penguin-beak: orange;
    }
  
    @media (max-width: 350px) {
      :root {
        /* 只修改这一行下面的代码 */
        --penguin-size: 200px;
        --penguin-skin: black;
        /* 只修改这一行上面的代码 */
      }
    }
  
    .penguin {
      position: relative;
      margin: auto;
      display: block;
      margin-top: 5%;
      width: var(--penguin-size, 300px);
      height: var(--penguin-size, 300px);
    }
  
    .right-cheek {
      top: 15%;
      left: 35%;
      background: var(--penguin-belly, white);
      width: 60%;
      height: 70%;
      border-radius: 70% 70% 60% 60%;
    }
  
    .left-cheek {
      top: 15%;
      left: 5%;
      background: var(--penguin-belly, white);
      width: 60%;
      height: 70%;
      border-radius: 70% 70% 60% 60%;
    }
  
    .belly {
      top: 60%;
      left: 2.5%;
      background: var(--penguin-belly, white);
      width: 95%;
      height: 100%;
      border-radius: 120% 120% 100% 100%;
    }
  
    .penguin-top {
      top: 10%;
      left: 25%;
      background: var(--penguin-skin, gray);
      width: 50%;
      height: 45%;
      border-radius: 70% 70% 60% 60%;
    }
  
    .penguin-bottom {
      top: 40%;
      left: 23.5%;
      background: var(--penguin-skin, gray);
      width: 53%;
      height: 45%;
      border-radius: 70% 70% 100% 100%;
    }
  
    .right-hand {
      top: 5%;
      left: 25%;
      background: var(--penguin-skin, black);
      width: 30%;
      height: 60%;
      border-radius: 30% 30% 120% 30%;
      transform: rotate(130deg);
      z-index: -1;
      animation-duration: 3s;
      animation-name: wave;
      animation-iteration-count: infinite;
      transform-origin:0% 0%;
      animation-timing-function: linear;
    }
  
    @keyframes wave {
        10% {
          transform: rotate(110deg);
        }
        20% {
          transform: rotate(130deg);
        }
        30% {
          transform: rotate(110deg);
        }
        40% {
          transform: rotate(130deg);
        }
      }
  
    .left-hand {
      top: 0%;
      left: 75%;
      background: var(--penguin-skin, gray);
      width: 30%;
      height: 60%;
      border-radius: 30% 30% 30% 120%;
      transform: rotate(-45deg);
      z-index: -1;
    }
  
    .right-feet {
      top: 85%;
      left: 60%;
      background: var(--penguin-beak, orange);
      width: 15%;
      height: 30%;
      border-radius: 50% 50% 50% 50%;
      transform: rotate(-80deg);
      z-index: -2222;
    }
  
    .left-feet {
      top: 85%;
      left: 25%;
      background: var(--penguin-beak, orange);
      width: 15%;
      height: 30%;
      border-radius: 50% 50% 50% 50%;
      transform: rotate(80deg);
      z-index: -2222;
    }
  
    .right-eye {
      top: 45%;
      left: 60%;
      background: black;
      width: 15%;
      height: 17%;
      border-radius: 50%;
    }
  
    .left-eye {
      top: 45%;
      left: 25%;
      background: black;
      width: 15%;
      height: 17%;
      border-radius: 50%;
    }
  
    .sparkle {
      top: 25%;
      left:-23%;
      background: white;
      width: 150%;
      height: 100%;
      border-radius: 50%;
    }
  
    .blush-right {
      top: 65%;
      left: 15%;
      background: pink;
      width: 15%;
      height: 10%;
      border-radius: 50%;
    }
  
    .blush-left {
      top: 65%;
      left: 70%;
      background: pink;
      width: 15%;
      height: 10%;
      border-radius: 50%;
    }
  
    .beak-top {
      top: 60%;
      left: 40%;
      background: var(--penguin-beak, orange);
      width: 20%;
      height: 10%;
      border-radius: 50%;
    }
  
    .beak-bottom {
      top: 65%;
      left: 42%;
      background: var(--penguin-beak, orange);
      width: 16%;
      height: 10%;
      border-radius: 50%;
    }
  
    body {
      background: linear-gradient(35deg,#CCFFFF,#FFCCCC);
    }
  
    .penguin * {
      position: absolute;
    }
    p:hover {
  transform: scale(2.1);
}
  </style>
  <div>
    <p>FiliFili，专为鼠鼠开设的网站。</p>
    
    企鹅挥一下手我暑假多一天( ๑╹ ꇴ╹) ｸﾞｯ! 


  </div>
  <div class="penguin">
    <div class="penguin-bottom">
      <div class="right-hand"></div>
      <div class="left-hand"></div>
      <div class="right-feet"></div>
      <div class="left-feet"></div>
    </div>
    <div class="penguin-top">
      <div class="right-cheek"></div>
      <div class="left-cheek"></div>
      <div class="belly"></div>
      <div class="right-eye">
        <div class="sparkle"></div>
      </div>
      <div class="left-eye">
        <div class="sparkle"></div>
      </div>
      <div class="blush-right"></div>
      <div class="blush-left"></div>
      <div class="beak-top"></div>
      <div class="beak-bottom"></div>
    </div>
  </div>